<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:23
 * @LastEditTime: 2020-08-25 09:03:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\views\Login.vue
-->
<template>
  <div class="login">
    <Card style="width:400px">
      <Form ref="loginFromRef" :model="loginForm" :rules="loginFormRules">
        <FormItem prop="username">
          <Input size="large" type="text" placeholder="请输入用户名" v-model="loginForm.username" />
        </FormItem>
        <FormItem prop="password">
          <Input size="large" type="text" placeholder="请输入密码" v-model="loginForm.password" />
        </FormItem>
        <FormItem>
          <Checkbox v-model="remember">记住密码</Checkbox>
          <a href="javasript:void(0)" style="float:right">忘记密码</a>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="login" size="large" long>登录</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Login',
  data() {
    // 正则验证
    const validatePassCheck = (rule, value, callback) => {
      const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/
      // console.log(reg.test(value))
      if (!reg.test(value)) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      remember: true,
      loginFormRules: {
        username: [
          { required: true, message: '请输入你的用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入你的密码', trigger: 'blur' },
          {
            validator: validatePassCheck,
            message: '密码校验失败!密码包含大小写字母、数字、特殊符号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 引入login模块
    ...mapActions('Login', ['loginUser']),
    login() {
      this.$refs.loginFromRef.validate(async valid => {
        if (!valid) return
        localStorage.setItem('user_name', this.loginForm.username)
        localStorage.setItem('user_pwd', this.loginForm.password)
        // console.log(this.loginUser)
        this.loginUser({
          user_name: this.loginForm.username,
          user_pwd: this.loginForm.password
        })
      })
    },
    resetLoginForm() {
      this.$refs.loginFromRef.resetFields()
    }
  },
  mounted() {
    if (localStorage.getItem('user_name')) {
      this.loginForm.username = localStorage.getItem('user_name')
      this.loginForm.password = localStorage.getItem('user_pwd')
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url(../assets/login_wraper.8ab0d297.jpg) navy;
  .ivu-card {
    width: 400px;
    position: absolute;
    right: 15%;
    top: 25%;
    padding: 16px 10px;
    box-sizing: border-box
  }
}
</style>
